<script lang="ts" setup>
  import { ref } from 'vue';
  import { Tabs, TabPane, Card } from '@arco-design/web-vue';
  import { PageEnum } from '/@/enums/pageEnum';
  import { RouterView, useRouter } from 'vue-router';

  const router = useRouter();
  const activeKey = ref(router.currentRoute.value.path);
  const tabs = [
    { title: '关注者数据', key: PageEnum.CREATOR_DATA_FOLLOWER_DATA },
    { title: '关注者列表', key: PageEnum.CREATOR_DATA_FOLLOWER_LIST },
  ];

  function onTabChange(key) {
    router.push(key);
  }
</script>

<template>
  <Card>
    <Tabs hoverable v-model:activeKey="activeKey" @change="onTabChange">
      <TabPane v-for="item in tabs" :key="item.key" :title="item.title">
        <RouterView />
      </TabPane>
    </Tabs>
  </Card>
</template>
